<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="/functions" prefix="f" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>我的钱包</title>
		<!-- amazeui -->
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/ui/css/amazeui.min.css" />
		<!-- lib -->
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/lib/swiper/css/swiper.min.css" />
		<!-- app -->
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/ui.css" />
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/header.css"/>
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/integration.css"/>
		<style type="text/css">
			.jifen_zong{
				font-size: 40px;
			    color: #484848;
			    position: absolute;
			    left: 43px;
			    top: 28px;
			}
			.jifen_zongs{
				font-size: 40px;
			    color: #484848;
			    position: absolute;
			    left: 16px;
			    top: 28px;
			}
			.ketixian{
				font-size: 12px;
			    color: #999999;
			    position: absolute;
			    left: 15px;
			    top: 60px;
			}
			.integta_num{
				left: 75px;
			}
			.shopjifen{
				font-size: 12px;
    			color: #999999;
			    position: absolute;
			    left: 172px;
			   	top: 60px;
			}
			.shopjifen_num{
				font-size: 12px;
    			color: #EB3D00;
			    position: absolute;
			    left: 239px;
			   	top: 54px;
			}
			header{
				width: 100%;
				position: fixed;
				top: 0;
				z-index: 10;
			}
			.logo_text{
				height: 40px;
				line-height: 40px;
				display: inline-block;
				color: #595b60;
				font-size: 14px;
				margin-left: 6px;
				float: left;
			}
			.nin{
				margin-top: 185px;
			}
			.headers {
			    width: 100%;
			    height: 40px;
			    background-color: #1e1f22;
			}
			.integta_btns {
			    position: absolute;
			    right: 15px;
			    top: 35px;
			    width: 80px;
			    height: 40px;
			    border-radius: 20px;
			    line-height: 40px;
			    text-align: center;
			    border: 1px solid #e34b4b;
			    background-color: #e34b4b;
			    color: white;
			    font-size: 20px;
			}
			.balance{
			   float: right;
			   font-size: 14px;
			   color:#afdada;
			   cursor: pointer;
			   margin-right: 3%;
               margin-top: 1%;
			}
			.division{
			    width: 100%;
			    height: 10px;
			    background: #efefef;
			    position: absolute;
			    top: 220px;
			    z-index: 999;
			    border-bottom:1px solid #c7c5c5;
			    border-top:1px solid #c7c5c5;
			}
			.box-text{
			    position: absolute;
			    top: 245px;
			    color:#828282;
			}
			.box-text h3{
			    margin: 0;
			    font-size: 14px;
			    padding-left: 3%;
			    padding-top: 10px; 
			}
			.box-main{
			        width: 95%;
				    margin: 0 auto;
				    font-size: 12px;
			}
			.box-main p:NTH-OF-TYPE(3) {
	                 color: #4bb4ef;
            }
           /* 重置按钮 */
            .rechargeBtn{
                    display: block;
				    width: 95%;
				    height: 40px;
				    line-height: 40px;
				    font-weight: bold;
				    font-size: 16px;
				    background: #afdada;
				    margin: 0 auto;
				    color: #fff;
				    border-radius: 5px;	   
            }
		</style>
	</head>
	<body>
			    <!-- 精品推荐 -->
	    <div class="app-part app-part-flow">
		    <header>
				<div class="headers">
					<a href="${BASE_PATH}/my"><span class="back"></span></a>
					<a href="${BASE_PATH}/index"><span class="logo_pic"></span></a>
					<span class="logo_text">OK 妈咪</span>
					<!-- <span class="header_text">我的积分</span> -->
				</div>
				<div class="containers">
					<div class="con_header">
						<span class="integta">余额账户（元）:</span>
						<span class="balance">余额明细 ></span>
						<span class="jifen_zongs">¥</span>
						<span class="jifen_zong"> ${money }</span>
						<!-- <span class="integta_btns" onclick="topoint()">充值</span> -->
						<span class="integta_text">提示：购买宝贝时可以直接使用钱包余额进行支付哦</span>
						<!--  <span class="guize" >退款规则</span>  -->
					</div>
					 <span class="rechargeBtn" onclick="topoint()">充值</span>
				</div>
				<!-- <div class="nr_header">
					<span id="shouyi">交易记录</span>
				</div> -->
			</header>
			<!-- <div id="moneyList" class="am-g app-goods-list nin"></div> -->
			<hr class="division">
			<div class="box-text">
			   <h3>充值说明：</h3>
			   <div class="box-main">
			        <p>亲爱的会员您好，在此平台进行充值的钱会储存到您在平台的“我的钱包”中。充值后“我的钱包”中的余额可用于在平台上购买货币商品付款时直接使用，但无法从平台上提出钱包余额。</p>
			        <p>在购买货币商品时也可直接通过微信支付进行付款。使用微信支付付款直接购买商品后，如果您有特殊情况需要取消订单，微信支付付款的金额会在您完成取消订单操作后，直接退回到您微信支付所使用的微信钱包或打款储蓄卡中。<b>在您下单后7个工作日内可直接进行取消订单并自动退款。超过7个工作日后将无法进行取消订单行为。</b>您也可以通过联系客服来进行沟通咨询。</p>
			        <p>客服电话：0371-58638886</p>
			   </div>
			</div>
	    </div>
		<!-- lib -->
		<script type="text/javascript" src="${BASE_PATH}/static/lib/jquery/jquery-1.11.2.min.js"></script>
		<!-- amazeui -->
		<script type="text/javascript" src="${BASE_PATH}/static/ui/js/amazeui.min.js"></script>
		<!-- lib -->
		<script type="text/javascript" src="${BASE_PATH}/static/lib/swiper/js/swiper.jquery.min.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/layer/layer.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/template/template.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/jquery-lazyload/jquery.lazyload.min.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/jquery-marquee/jquery.marquee.min.js"></script>
		<!-- app -->
		<script type="text/javascript" src="${BASE_PATH}/static/app/js/kit.js"></script>
	 
	 	<script type="text/html" id="dataTpl">
			{{each list as log }}
				<div class="goods_boxs am-u-md-4 am-u-lg-3 app-goods-item">
					{{if log.orderType==1}}     
						<div class="shouyi_list">
							<div class="list_time">{{log.createDate}}</div>
							<div class="list_tital">{{log.describe}}</div>
										{{if log.type==1}}
											<div class="list_numa">已退款</div>
						  	 	 			<div class="list_num">+<fmt:formatNumber type="number" value="${goods.marketPrice }" pattern="0.00" maxFractionDigits="2"/>{{log.amount}}</div>
								 			<div class="list_numb"><span class="integta_btns" onclick="orderdeail('{{log.fromOrderNum}}')">查看</span></div>
										{{else if log.type==2}}
											<div class="list_numa">订单消费</div>
						  	 	 			<div class="list_num">-{{log.amount}}</div>
								 			<div class="list_numb"><span class="integta_btns" onclick="orderdeail('{{log.fromOrderNum}}')">查看</span></div>
										{{/if}}
						</div>
					{{else if log.orderType==2}}
						<div class="tixian_list">
							<div class="list_time">{{log.createDate}}</div>
							<div class="list_tital">{{log.describe}}</div>
									<div class="list_numa">充值</div>
									<div class="list_num">+{{log.amount}}</div>
						</div>
					{{/if}}
				</div>
			{{/each}}
		</script>
		<script type="text/javascript">
	 	var loading = false ,pageNum = 0, totalPage = 1;
			//加载标识，表示当前是否有请求未完成，防止同时多个请求
			var loading = false;
			$(function(){
				//绑定“加载中”进入加载事件
				Kit.util.onPageEnd(function(){
	               	if(pageNum < totalPage && !loading){
	               		loading = true;
	               		$("#moneyList").append("<div class=\"app-loading\">正在加载</div>");
	               		Kit.ajax.post("${BASE_PATH}/my/moneyChange",{pageNum:pageNum+1,pageSize:10},function(result){
              				$("#moneyList").append(template("dataTpl",result.object));
              				//amazeui要求在最后一个元素上添加am-u-end样式，否则默认为右浮动
    						$(".app-goods-item","#messList").removeClass("am-u-end").last().addClass("am-u-end");
              				$(".app-loading","#moneyList").remove();
              				pageNum = result.object.pageNumber;
    						totalPage = result.object.totalPage;
    						//重置加载标识
							loading = false;
						});
	               	}
				});
			});
			function guize(){
				window.location.href="${BASE_PATH}/secondStage/guize";
			}
			function topoint(){
				window.location.href="${BASE_PATH}/my/topoint";
			}
			function orderdeail(num){
				window.location.href="${BASE_PATH}/order/detail/"+num;
			}
			//余额明细
			!function(){
				var balance=document.querySelector(".balance");
				balance.onclick=function(){
					window.location.href="${BASE_PATH}/my/balanceDetail";
				}
			}()
		</script>
	</body>
</html>
